<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>v-text指令学习</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!-- 1：插值语法实现，更灵活，便于拼接，但有插值闪烁问题 -->
      <div>{{name}}</div>
      <!-- 2：v-text会拿到data中的数据，替换整个标签的值，不能拼接 -->
      <!-- v-text和v-html都不会有插值闪烁问题 -->
      <div v-text="name"></div>
      <div v-text="str"></div>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        name: "尚硅谷",
        //v-text特点是不会解析标签，所有都会当作正常字符串
        str: "<h3>你好</h3>",
      },
    });
  </script>
</html>
